<template>
  <section>
    <el-row  style="display: flex;flex-direction: row;flex-wrap: wrap">
      <el-row style="margin: 5px" v-for="(item,index) in photos" :key="index" v-if="photos.length>0">
        <el-row class="imgBox">
          <el-row style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%" >
            <i class="el-icon-error" @click.stop="delItem(index)"/>
            <img :src="item" style="width:100%;height:100%;border-radius: 5%" v-if="item !== ''"/>
            <i class="el-icon-picture" style="font-size: 120px;color: #bbb;border:0px solid red" v-else/>
          </el-row>
        </el-row>
        <el-row class="input">
          <upload-img v-on:get="getImgUrl($event,index)"></upload-img>
          <el-input size="mini" v-model="photos[index]" style="width: 70%;margin-right: 6px" placeholder="请输入图片地址"></el-input>
        </el-row>
      </el-row>
      <el-row class="imgBox" v-if="photos.length<5">
        <el-row style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%" >
          <i class="el-icon-plus" style="font-size: 120px;color: #bbb;border:0px solid red" @click="addPhotoBtn"/>
        </el-row>
      </el-row>
    </el-row>
    <el-row>
      <el-button  style="float: right" size="mini" type="success" @click="savePhotosBtn">保存</el-button>
    </el-row>
  </section>
</template>

<script>
  import uploadImg from '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "goodsPhoto",
    components:{uploadImg},
    props:['photos'],
    data() {
      return {
      }
    },
    watch:{
    },
    created(){
      console.log('create-----',this.photos)
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getImgUrl(e,index) {
        // if(this.ad.img === undefined){
        //   Vue.set(this.photos[index],'img',e[0].url)
        //   return
        // }
        // photo=e[0].url
        // this.photos[index] = e[0].url
        Vue.set(this.photos,[index],e[0].url)
        console.log('photos-------',this.photos)
      },
      addPhotoBtn(){
        console.log('push',this.photos)
        if(this.photos.length >=5) return
        this.photos.push('')
        console.log('push后-----',this.photos)
      },
      delItem(index){
        this.$confirm('确认删除？')
          .then(()=> {
            this.photos.splice(index,1)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      savePhotosBtn(){
        console.log(this.photos)
        this.$emit('savePhotos',this.photos)
      }
    }
  }
</script>

<style scoped>
  .imgBox{
    border:1px solid #bbb;
    padding: 5px;
    width:200px;
    height: 200px;
    border-radius: 5%;
    margin: 0 5px;
  }
  .input{
    width:100%;
    /*margin-top: 10px;*/
    position: relative;
    border: 0px solid red;
    /*bottom: 35px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;
  }

  .imgBox:hover .el-icon-error{
    display: block;
  }
  .el-icon-error{
    display: none;
    border: 0px solid red;
    position: absolute;
    right: 0px;
    top:5px;
    color:red;
    font-size: small;
  }
</style>
